import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';

import { connect } from 'dva';
import moment from 'moment';
import PageLoading from '@/components/PageLoading';
import { FormattedMessage } from 'umi-plugin-react/locale';
import { Row, Col, Card, Icon, Tooltip, Form, Statistic, Modal, DatePicker, message, Spin, Progress, Input, InputNumber, Upload, Button,Layout  } from 'antd';
import styles from "./index.less";
import download from '@/utils/download';
import { routerRedux } from 'dva/router';
import theLayer from '@/assets/medicalKnowledge/图层21.png'
import Unknown from '@/assets/medicalKnowledge/Unknown.png'
import Unresolved from '@/assets/medicalKnowledge/Unresolved.png'
import artificial from '@/assets/medicalKnowledge/artificial.png'
import custom from '@/assets/medicalKnowledge/custom.png'
import top from '@/assets/medicalKnowledge/top.png'
import topc from '@/assets/medicalKnowledge/top-c.png'
import axios from 'axios'
import iconc from '@/assets/icons/iconc.png'
import wen1 from '@/assets/knowlesgeSmartMaintenance/wen1.png'
import wen2 from '@/assets/knowlesgeSmartMaintenance/wen2.png'
import wen3 from '@/assets/knowlesgeSmartMaintenance/wen3.png'
import wen4 from '@/assets/knowlesgeSmartMaintenance/wen4.png'

const bgBround = {
  background: 'url(' + theLayer + ') no-repeat',
  width: '100%',
  height: '100%',
  backgroundPosition: 'center'
  // backgroundSize: '100% 100%',
}
const { MonthPicker, RangePicker } = DatePicker;
const dateFormat = 'YYYY-MM-DD';
const dateFormatList = ['DD-MM-YYYY', 'DD-MM-YY'];
const FormItem = Form.Item;
const { Header, Content, Footer, Sider } = Layout;

@connect(({ user }) => ({
  currentUser: user,
}))


class KnowledgeSmartMaintenance extends Component {
  constructor(props) {
    super(props);
    this.state = {
      login: true,
      count: 0,
      createTime: '',
      countT: '',
      visible1: false,
      visible2: false,
      visible3: false,
      visible4: false,
      timea: '',
      timeb: '',
      timec: '',
      cstime: [moment(moment().subtract('days', 6).format('YYYY-MM-DD'), dateFormat), moment(moment().format('YYYY-MM-DD'), dateFormat)],
      bytime: '',
      excessiveTime: '',
      texta: '导入所有问题',
      // 导入时间参数
      typepd: '',
      createTime1: '',
      count1: '',
      createTime2: '',
      count2: '',
      createTime3: '',
      count3: '',
      successA: '',
      successB: '',
      rightAlist: [],
      rightBlist: [],
      // 问题推荐弹窗
      rightCol1: false,
      rightCol2: false,
      fileList: [],
      percent: 0,
      num: 0,
      percentB: 0,
      numB: 0,
      leftA: true,
      percentC: 0,
      buttonDJ: false
    };
  }

  componentDidMount() {
    this.drjl('all')
    this.knowledgeMaintainImportStatus('all')
    this.maintainRecommendStatus()
    this.knowledgeMaintainClusterStatus()
    console.log(this.props)
  }

  // 获取问题推荐状态  
  maintainRecommendStatus = () => {

    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'knowledgeSmartMaintenance/maintainRecommendStatus',
        payload: {},
        callback: res => {
          console.log('获取问题推荐状态', res);
          if (res.status === 'wait') {
            this.setState({
              successA: 'wait',
              rightAlist: res
            })
            this.percent()
          } else {
            // this.setState({ loginpig: false })
            this.setState({
              successA: res.status,
              rightAlist: res,
              login: false
            })
          }
        },
      });
    });
  }

  // 进度条任务
  percent = () => {
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'knowledgeSmartMaintenance/knowledgerecommendProcess',
        payload: {},
        callback: res => {
          console.log('获取任务进度', res);
          if (res.process === 1) {
            this.setState({ num: res.process }, () => {
              this.maintainRecommendStatus()
            })
          } else if (res.process === 0) {
            this.setState({ percent: res.process }, () => {
              setTimeout(() => {
                this.setState({ num: res.process }, () => {
                  this.percent()
                })
              }, 1000)
            })
          } else {
            const number = res.process
            console.log(Math.floor(Number(number * 100)))
            this.setState({ percent: Math.floor(Number(number * 100)) }, () => {
              setTimeout(() => {
                this.setState({ num: res.process }, () => {
                  this.percent()
                })
              }, 100)
            })
          }
        },
      });
    });
  }

  // 聚类进度任务
  percentB = () => {
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'knowledgeSmartMaintenance/knowledgeclusterProcess',
        payload: {},
        callback: res => {
          console.log('获取任务进度', res);
          if (res.process === 1) {
            this.setState({ numB: res.process }, () => {
              this.knowledgeMaintainClusterStatus()
            })
          } else if (res.process === 0) {
            this.setState({ percentB: res.process }, () => {
              setTimeout(() => {
                this.setState({ num: res.process }, () => {
                  this.percentB()
                })
              }, 1000)
            })
          } else {
            const number = res.process
            console.log(Math.floor(Number(number * 100)))
            this.setState({ percentB: Math.floor(Number(number * 100)) }, () => {
              setTimeout(() => {
                this.setState({ num: res.process }, () => {
                  this.percentB()
                })
              }, 1000)
            })
          }
        },
      });
    });
  }

  // 获取问题聚类状态
  knowledgeMaintainClusterStatus = () => {
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'knowledgeSmartMaintenance/knowledgeMaintainClusterStatus',
        payload: {},
        callback: res => {
          console.log('获取问题聚类状态', res);
          if (res.status === 'wait') {
            this.setState({
              successB: 'wait',
              rightBlist: res
            })
            this.percentB()
          } else {
            // this.setState({ loginpig: false })
            this.setState({
              successB: res.status,
              rightBlist: res
            }, () => {
              this.init()
            })
          }
        },
      });
    });
  }

  // 去查看详情页面
  checklist = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push({
      pathname: '/capacity/knowledgeSmartMaintenance/CheckList',
      // params: {}
    }));
  }

  // 去黑名单页面
  theBlacklist = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push({
      pathname: '/capacity/knowledgeSmartMaintenance/theBlacklist',
    }));
  }



  // 刷新导入记录
  drjl = (type) => {
    const { dispatch, currentUser } = this.props;
    this.setState({
      percentC: 99.9
    })
    setTimeout(() => {
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'knowledgeSmartMaintenance/maintainImportRecord',
          payload: { type: 'all', },
          callback: res => {
            switch (res.source) {
              case 'UNKNOWN':
                this.setState({ texta: '导入未知问题' })
                break;
              case 'UNSOLVED':
                this.setState({ texta: '导入未解决问题' })
                break;
              case 'ASK_HUMAN':
                this.setState({ texta: '导入转人工问题' })
                break;
              case 'CUSTOM':
                this.setState({ texta: '导入自定义问题' })
                break;
            }
            console.log('导入记录', res);
            this.setState({
              createTime: res.createTime,
              countT: res.count,
              buttonDJ: false
            }, () => {

            })
          },
        });
      });
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'knowledgeSmartMaintenance/knowledgeMaintainImportTotal',
          payload: {},
          callback: res => {
            console.log('列表数据', res);
            this.setState({
              count: res.count,
              leftA: true,
              // percentC: 0
            })
          },
        });
      });
    }, 10)
  }

  // 刷新导入记录
  drj2 = (type) => {
    const { dispatch, currentUser } = this.props;
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'knowledgeSmartMaintenance/maintainImportRecord',
        payload: { type, },
        callback: res => {
          console.log('导入记录', res);

          if (type === 'unknown') {
            this.setState({ createTime1: res.createTime, count1: res.count })
          } else if (type === 'unresolved') {
            this.setState({ createTime2: res.createTime, count2: res.count })
          } else if (type === 'askHuman') {
            this.setState({ createTime3: res.createTime, count3: res.count })
          }
        },
      });
    });
  }



  // 获取状态  
  knowledgeMaintainImportStatus = (item) => {
    const { dispatch, currentUser } = this.props;
    this.setState({ login: true })
    this.reqRef = requestAnimationFrame(() => {
      dispatch({
        type: 'knowledgeSmartMaintenance/knowledgeMaintainImportStatus',
        payload: {},
        callback: res => {
          console.log('获取状态', res);
          if (res.status === 'wait') {
            this.setState({
              // successA: 'wait',
              leftA: false,
              login: false
            })
            this.percentC()
          } else {
            // this.setState({ loginpig: false })
            this.setState({
              leftA: true,
              login: false
            })
            this.drjl(item)
          }
        },
      });
    });
  }

  // 进度条任务
  percentC = () => {
    const { dispatch, currentUser } = this.props;
    this.setState({ leftA: false })
    setTimeout(() => {
      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'knowledgeSmartMaintenance/knowledgeMaintainImportProcess',
          payload: {},
          callback: res => {
            console.log('获取任务进度', res);
            if (res.process === 1) {
              this.setState({ numB: res.process }, () => {
                this.drjl()
              })
            } else if (res.process === 0) {
              this.setState({ percentC: res.process }, () => {
                setTimeout(() => {
                  this.setState({ numB: res.process }, () => {
                    this.percentC()
                  })
                }, 1000)
              })
            } else {
              const number = res.process
              console.log(Math.floor(Number(number * 100)))
              this.setState({ percentC: Math.floor(Number(number * 100)) }, () => {
                setTimeout(() => {
                  this.setState({ numB: res.process }, () => {
                    this.percentC()
                  })
                }, 1000)
              })
            }
          },
        });
      });
    }, 1000)
  }

  knowIssue = () => {
    console.log('打开未知问题页面')

    this.setState({
      visible1: true,
      percentC: 0
    }, () => {
      this.drj2('unknown')
    });

  }

  noSolveIssue = () => {
    this.setState({
      visible2: true,
      percentC: 0
    }, () => {
      this.drj2('unresolved')
    });

  }

  zrgIsson = () => {
    this.setState({
      visible3: true,
      percentC: 0
    }, () => {
      this.drj2('askHuman')
    });

  }

  zdysson = () => {
    this.setState({
      visible4: true,
    });
  }


  handleOkA = e => {
    console.log(e);
    let userInfo = this.props.form.getFieldsValue();// 获取数据
    this.props.form.validateFields((err, values) => {// 校验方法
      if (!err) {
        console.log(userInfo)
        this.setState({
          visible1: false,
          timea: [moment(userInfo.coretime1[0]._d).format('YYYY-MM-DD'), moment(userInfo.coretime1[1]._d).format('YYYY-MM-DD')]
        }, () => {
          console.log(this.state.timea)
          // importUnknownProblem
          const { dispatch, currentUser } = this.props;
          this.setState({ login: true, buttonDJ: true })
          this.reqRef = requestAnimationFrame(() => {
            dispatch({
              type: 'knowledgeSmartMaintenance/importUnknownProblem',
              payload: { from: this.state.timea[0], to: this.state.timea[1] },
              callback: res => {
                if (res.code === 0) {
                  console.log('导入未知问题', res);
                  // message.success(`本次成功导入${res.data.count}条未知问题`)
                  this.setState({
                    login: false,
                    texta: '导入未知问题',
                    typepd: 'all'
                  })

                  this.percentC()
                }
              },
            });
          });
        });
      }
    })

  };

  handleCancelA = e => {
    console.log(e);
    this.props.form.setFields({ "coretime1": '' })
    this.setState({
      visible1: false,
    });
  };

  // 导入未解决问题----
  handleOkB = e => {
    console.log(e);
    let userInfo = this.props.form.getFieldsValue();// 获取数据
    this.props.form.validateFields((err, values) => {// 校验方法
      if (!err) {
        console.log(userInfo)
        this.setState({
          visible2: false,
          timeb: [moment(userInfo.coretime2[0]._d).format('YYYY-MM-DD'), moment(userInfo.coretime2[1]._d).format('YYYY-MM-DD')]
        }, () => {
          console.log(this.state.timeb)
          // importUnknownProblem
          const { dispatch, currentUser } = this.props;
          this.setState({ login: true, buttonDJ: true })
          this.reqRef = requestAnimationFrame(() => {
            dispatch({
              type: 'knowledgeSmartMaintenance/importUnresolvedProblem',
              payload: { from: this.state.timeb[0], to: this.state.timeb[1] },
              callback: res => {
                if (res.code === 0) {
                  console.log('导入未知问题', res);
                  // message.success(`本次成功导入${res.data.count}条未知问题`)
                  this.setState({
                    login: false,
                    texta: '导入未解决问题',
                    typepd: 'all'
                  })
                  this.percentC()
                }
              },
            });
          });
        });
      }
    })
  };

  handleCancelB = e => {
    console.log(e);
    this.props.form.setFields({ "coretime2": '' })
    this.setState({
      visible2: false,
    });
  };

  rightCol1 = () => {
    console.log('打开推荐问题页面')
    let userInfo = this.props.form.getFieldsValue();// 获取数据
    this.props.form.validateFields((err, values) => {//校验方法
      console.log(userInfo)
      // knowledgerecommendSubmit
      let a = ''
      let b = ''
      let c = ''
      let d = ''
      if (userInfo.InputNumber1 !== '') { a = Number(userInfo.InputNumber1) }
      if (userInfo.InputNumber2 !== '') { b = Number(userInfo.InputNumber2) }
      if (userInfo.xwcs1 !== '') { c = Number(userInfo.xwcs1) }
      if (userInfo.xwcs2 !== '') { d = Number(userInfo.xwcs2) }
      const { dispatch, currentUser } = this.props;

      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'knowledgeSmartMaintenance/knowledgerecommendSubmit',
          payload: {
            includeKey: userInfo.bkKeyword,
            notIncludeKey: userInfo.NoKeyword,
            minWordCount: a,
            maxWordCount: b,
            minAskCount: c,
            maxAskCount: d,
          },
          callback: res => {
            if (res.code === 0) {
              console.log('开始推荐问题推荐任务', res);
              message.success(res.msg)
              this.setState({
                rightCol1: false
              }, () => {
                this.maintainRecommendStatus()
              })
              // this.drjl('unknown')
            }
          },
        });
      });
    });
  }

  rightCol2 = () => {
    console.log('打开推荐问题页面')
    let userInfo = this.props.form.getFieldsValue();// 获取数据
    this.props.form.validateFields((err, values) => {// 校验方法
      console.log(userInfo)
      // knowledgerecommendSubmit
      let a = ''
      let b = ''
      let c = ''
      let d = ''
      if (userInfo.InputNumber3 !== '') { a = Number(userInfo.InputNumber3) }
      if (userInfo.InputNumber4 !== '') { b = Number(userInfo.InputNumber4) }
      if (userInfo.xwcs3 !== '') { c = Number(userInfo.xwcs3) }
      if (userInfo.xwcs4 !== '') { d = Number(userInfo.xwcs4) }
      const { dispatch, currentUser } = this.props;

      this.reqRef = requestAnimationFrame(() => {
        dispatch({
          type: 'knowledgeSmartMaintenance/knowledclusterSubmit',
          payload: {
            includeKey: userInfo.bkKeyword1,
            notIncludeKey: userInfo.NoKeyword1,
            minWordCount: a,
            maxWordCount: b,
            minAskCount: c,
            maxAskCount: d,
          },
          callback: res => {
            if (res.code === 0) {
              console.log('开始推荐问题推荐任务', res);
              message.success(res.msg)
              this.setState({
                rightCol2: false
              }, () => {
                this.knowledgeMaintainClusterStatus()
              })
              // this.drjl('unknown')
            }
          },
        });
      });
    });
  }

  rightColNo2 = () => {
    console.log('关闭推荐问题页面')
    this.setState({ rightCol2: false })
  }



  rightColNo1 = () => {
    console.log('关闭推荐问题页面')
    this.setState({ rightCol1: false })
  }


  handleOkC = e => {
    console.log(e);
    let userInfo = this.props.form.getFieldsValue();// 获取数据
    this.props.form.validateFields((err, values) => {// 校验方法
      if (!err) {
        console.log(userInfo)
        this.setState({
          visible3: false,
          timec: [moment(userInfo.coretime3[0]._d).format('YYYY-MM-DD'), moment(userInfo.coretime3[1]._d).format('YYYY-MM-DD')]
        }, () => {
          console.log(this.state.timec)
          // importUnknownProblem
          const { dispatch, currentUser } = this.props;
          this.setState({ login: true, buttonDJ: true })
          this.reqRef = requestAnimationFrame(() => {
            dispatch({
              type: 'knowledgeSmartMaintenance/importArtificialProblem',
              payload: { from: this.state.timec[0], to: this.state.timec[1] },
              callback: res => {
                if (res.code === 0) {
                  console.log('导入未知问题', res);
                  // message.success(`本次成功导入${res.data.count}条未知问题`)
                  this.setState({
                    login: false,
                    texta: '导入转人工问题',
                    typepd: 'all'
                  })
                  this.percentC()
                }
              },
            });
          });
        });
      }
    })

  };

  handleCancelC = e => {
    console.log(e);
    this.props.form.setFields({ "coretime3": '' })
    this.setState({
      visible3: false,
    });
  };

  handleOkD = (e) => {
    console.log(e)
  }

  handleCancelD = e => {
    console.log(e);
    // this.props.form.setFields({ "coretimeD": '' })
    // if (this.state.fileList.length === 0) {
    this.setState({
      visible4: false,
      fileList: []
    });
    // } else {
    //   message.error('正在上传文件,无法关闭窗口')
    // }


  };

  recommendF1 = () => {
    this.setState({ rightCol1: true })
  }

  recommendF2 = () => {
    this.setState({ rightCol2: true })
  }



  // eslint-disable-next-line react/sort-comp
  fetch = () => {

  }

  // 问题推荐去处理
  recommendFa = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push({
      pathname: '/capacity/knowledgeSmartMaintenance/problemRecommendedList',
    }));
  }

  // 问题聚类去处理
  recommendFb = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push({
      pathname: '/capacity/knowledgeSmartMaintenance/clusteringProblem',
    }));
  }



  // 下载模版
  dictTemp = () => {
    const { dispatch, currentUser } = this.props;
    dispatch({
      type: 'knowledgeSmartMaintenance/maintainImportTemplate',
      payload: {},
      callback: (res) => {
        console.log(res)
        let filename = decodeURIComponent(res.requestRes.headers.get('Content-Disposition').split('=')[1]);
        download.byBlob(res.fileBlob, filename)
      }
    });
  }

  businessWayA = () => {
    const { fileList } = this.state;
    const formData = new FormData();
    fileList.forEach(file => {
      console.log(file)
      formData.append('file', file.originFileObj);
    });
    this.setState({
      uploading: true
    });
    this.uploadFile(formData);
  }

  handleCancel = () => {
    this.setState({ visible4: false, uploading: false, fileList: [], percentC: 0 })
  }

  handleUpFile = (info) => {
    let fileList = [...info.fileList];
    fileList = fileList.slice(-1);
    console.log(fileList)
    fileList = fileList.map(file => {

      if (file.response) {
        file.url = file.response.url;
      }
      return file;
    });
    if (fileList[0].size > 2000000) { // 2000000
      message.error('上传文件超出2M')
      this.setState({ fileList: [], percentC: 0 });
    } else {
      this.setState({ fileList, percentC: 0 });
    }
  };

  uploadFile = (data) => {
    console.log(data)
    const robotId = JSON.parse(window.localStorage.getItem("currentUser")) == undefined ? '' : JSON.parse(window.localStorage.getItem("currentUser")).robotId;
    const token = JSON.parse(window.localStorage.getItem("currentUser")) == undefined ? '' : JSON.parse(window.localStorage.getItem("currentUser")).token;
    axios.post('/cloud/new/learn/knowledge/maintain/import', data, {
      method: 'post',
      processData: false,
      headers: { "Content-Type": "application/json", "token": token,"robotId":robotId }
    }).then((res) => {
      this.setState({
        uploading: false,
        buttonDJ: true
      }, () => {
        console.log(res.data.code)
        if (res.data.code) {
          return message.error(res.data.msg)
          this.setState({ buttonDJ: false })
        } else {
          this.setState({
            percentC: 0,
            visible: false,
            visible4: false,
            fileList: [],
            page: 1,
            texta: '导入转自定义问题',
            typepd: 'all'

          }, () => {
            setTimeout(() => {
              this.setState({

                fileList: [],
              }, () => {
                this.percentC()
              })
            }, 1000)
            if (res.data.msg) {
              message.success(res.data.msg);
            } else {
              message.success('导入成功');
            }
          });

        }
      })
    }).catch((error) => {
      message.error('导入失败请稍等再试')
    });
  };


  init = () => {
    const { rightAlist, rightBlist } = this.state
    if (rightAlist.questionCount === '0') {
      this.setState({ successA: 'none' })
    }
    if (rightBlist.questionCount === '0') {
      this.setState({ successB: 'none' })
    }
  }



  render() {

    const { getFieldDecorator } = this.props.form;
    const { uploading, fileList } = this.state;
    const FormItemLayont = {
      labelCol: {// 文字
        xs: 24,
        sm: 5
      },
      wrapperCol: {// 输入框
        xs: 24,
        sm: 19
      }
    }
    // const headData = { "token": JSON.parse(window.localStorage.getItem("currentUser")).token };
    const props = {
      onRemove: file => {
        this.setState(state => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: file => {
        this.setState(state => ({
          fileList: [...state.fileList, file],
        }));
        return false;
      },
      accept: '.xlsx',
      fileList,
      onChange: this.handleUpFile,
    }
    const buttonDJ = this.state.buttonDJ ? { pointerEvents: 'none', opacity: '0.5' } : null
    return (
      <Suspense fallback={<PageLoading />}>
        <PageHeaderWrapper>
          <Spin spinning={this.state.login}>
            <div className={styles.backgroundp}>
              {/* <Row className='padd' gutter={26}>
                <Col style={{ marginBottom: 20 }} sm={24} md={12} lg={6} > */}
                 <Layout>
                 <Sider width='400'>
                  <div style={{ boxShadow: '#e2e5e7 0px 3px 4px' }}>
                    <Row  className={styles.gutterRow}>
                      <div className={styles.gutterRows}>
                        <div style={{ height: 16 }}></div>
                        <div className={styles.ProblemsKU}>问题库</div>
                        <div style={{ height: 20 }}></div>
                        {this.state.leftA ? <span style={{ fontSize: 14, color: '#4b5475', textAlign: 'center', fontWeight: 600 }}>已添加问题</span> : <div><span style={{ fontSize: 12, color: '#000', textAlign: 'center' }}>正在处理导入问题</span><span className={styles.loading}></span></div>}

                        <div style={{ height: 35 }}></div>
                        <div className={styles.bjback}>
                          {/* login */}
                          {this.state.leftA ? <div style={bgBround}>
                            <div style={{ height: 70 }}></div>
                            <div onClick={this.checklist} className={styles.textZy}>
                              <Statistic suffix='个' valueStyle={{ color: '#ff7d27', fontSize: 19 }} value={this.state.count} /></div>
                          </div> : <div style={{ height: 170 }} className={styles.progrees}>
                              <Progress
                                type="circle"
                                percent={this.state.percentC}
                                width={120}
                                strokeWidth={8}
                              />
                              <div style={{ height: 20 }}></div>
                            </div>}

                          <div className={styles.flexjz} style={{ padding: '0px 36px', marginBottom: 15 }}>
                            <span style={{ color: '#999999' }}>最近添加</span>
                            <span>{this.state.createTime}</span>
                          </div>
                          <div className={styles.flexjz} style={{ padding: '0px 36px' }}>
                            <span style={{ color: '#999999' }}>{this.state.texta}</span>
                            <span>{this.state.countT}</span>
                          </div>
                          <div style={{ padding: '20px 36px' }}>
                            <div style={{ borderBottom: '1px dashed #f0f0f0' }}></div>
                          </div>
                          <Row style={{ margin: '0px 36px' }}>
                            <Col onClick={this.checklist} className={styles.quchakan} span={11}>去查看</Col>
                            <Col span={2}></Col>
                            <Col onClick={this.theBlacklist} className={styles.heimingdan} span={11}>黑名单</Col>
                          </Row>
                          <div style={{ height: 20 }}></div>
                          <Row style={{ margin: '0px 36px', borderRadius: '5px' }}>
                            <Col style={buttonDJ} className={styles.imga} span={12}>
                              <div>
                                <div onClick={this.knowIssue} style={{ paddingTop: 25, paddingLeft: 8, paddingBottom: 25, cursor: 'pointer' }}>
                                  <div className={styles.imgBk} >
                                    <img src={wen1} />
                                  </div>
                                </div>
                                <p style={{ color: '#333333' }}>导入未知问题</p>
                              </div>
                            </Col>
                            <Col style={buttonDJ}  className={styles.imgb} span={12}>
                            <div>
                                <div onClick={this.noSolveIssue} style={{ paddingTop: 25, paddingLeft: 17, paddingBottom: 25, cursor: 'pointer' }}>
                                  <div className={styles.imgBk} >
                                    <img src={wen2} />
                                  </div>
                                </div>
                                <p style={{ color: '#333333' }}>导入未解决问题</p>
                              </div>
                            </Col>
                            <Col style={buttonDJ} className={styles.imgc} span={12}>
                            <div>
                                <div onClick={this.zrgIsson} style={{ paddingTop: 25, paddingLeft: 16, paddingBottom: 25, cursor: 'pointer' }}>
                                  <div className={styles.imgBk} >
                                    <img src={wen3} />
                                  </div>
                                </div>
                                <p style={{ color: '#333333' }}>导入转人工问题</p>
                              </div>
                            </Col>
                            <Col style={buttonDJ} className={styles.imgd} span={12}>
                            <div>
                                <div onClick={this.zdysson} style={{ paddingTop: 25, paddingLeft: 16, paddingBottom: 25, cursor: 'pointer' }}>
                                  <div className={styles.imgBk} >
                                    <img src={wen4} />
                                  </div>
                                </div>
                                <p style={{ color: '#333333' }}>导入自定义问题</p>
                              </div>
                            </Col>
                            <Col style={{ height: 40 }} span={12}>

                            </Col>
                            <Col style={{ height: 40 }} span={12}>

                            </Col>
                          </Row>
                        </div>
                      </div>
                    </Row>
                  </div>
                  </Sider>
                  <Content style={{marginLeft:30}}>
                {/* </Col>
                <Col sm={24} md={12} lg={18}> */}
                  <div style={{ boxShadow: '#e2e5e7 0px 3px 4px' }}>
                    <Row className={styles.colorBackground}>
                      <Col style={{ padding: 10, }} xs={24}>
                        <div className={styles.title1}>
                          <div className={styles.round}></div>
                          <span style={{ color: '#4b5475', fontSize: 16, fontWeight: 600 }}>问题推荐</span>
                        </div>
                      </Col>
                    </Row>
                    <Card
                      bordered={false}

                    >
                      <div className={styles.rightBj}>

                        {
                          this.state.successA === 'success' ? <div style={{ paddingLeft: 40 }} className={styles.tjwca}>
                            <p style={{ color: '#999999' }}>{this.state.rightAlist.startTime}</p>
                            <p style={{ color: '#333333', fontWeight: 600 }}>{`推荐 ${this.state.rightAlist.itemCount} 个问题到 ${this.state.rightAlist.groupCount} 个知识点`}</p>
                            <p style={{ color: '#999999', marginBottom: 0 }}>待处理</p>
                            <div className={styles.tjwcb}>
                              <div style={{ marginRight: 30 }}><span style={{ color: '#ff7d27', fontSize: 36 }}>{this.state.rightAlist.qaCount}</span> <span style={{ color: '#333333', fontWeight: 600 }}>个知识点</span></div>
                              <div style={{ marginRight: 30, marginTop: 15 }}>|</div>
                              <div><span style={{ color: '#ff7d27', fontSize: 36 }}>{this.state.rightAlist.questionCount}</span > <span style={{ color: '#333333', fontWeight: 600 }}>个推荐问题</span></div>
                            </div>
                          </div> : null
                        }
                        {
                          this.state.successA === 'none' ? <div style={{ width: 390 }}><div className={styles.tjwcb}><img src={top} alt="" /><div style={{ marginLeft: 20 }}>将问题库中的问题推荐给知识库中意思相近的知识点</div></div></div> : null
                        }
                        {this.state.successA === 'success' ? <div style={{ flexBasis: '25%' }}></div> : null}
                        {this.state.successA === 'none' ? <div style={{ flexBasis: '25%' }}></div> : null}

                        {/* 推荐中 */}
                        {this.state.successA === 'wait' ? <div className={styles.center}><Progress type="circle" percent={this.state.percent} width={80} /><span  style={{ marginLeft: 20 }}>推荐中</span><span className={styles.loading}></span></div> : null}

                        {this.state.successA === 'none' ? <div onClick={this.recommendF1} className={styles.rightButtona}>开始推荐</div> : null}
                        {this.state.successA === 'none' ? <div className={styles.rightFFF}>&#12288;&#12288;&#12288;</div> : null}
                        {this.state.successA === 'success' ? <div onClick={this.recommendF1} className={styles.rightButtonx} >重新推荐</div> : null}
                        {this.state.successA === 'success' ? <div onClick={this.recommendFa} className={styles.rightButtona} style={{ marginLeft: 20 }}>去处理</div> : null}
                        {/* error */}
                        {
                          this.state.successA === 'error' ? <div style={{ width: 390 }}> <div style={{ width: 420 }} className={styles.tjwcb}><img style={{ width: 50, height: 50 }} src={iconc} alt="" /><div style={{ marginLeft: 20 }}>
                            <div style={{ height: 12 }}></div>
                            <p>抱歉，没有找到合适的推荐问题</p>
                            <p style={{ fontWeight: 600 }}>您可以在"问题库"中多导入一些相关问题后再进行推荐</p>
                          </div></div></div> : null
                        }
                        {this.state.successA === 'error' ? <div style={{ flexBasis: '25%' }}></div> : null}
                        {this.state.successA === 'error' ? <div onClick={this.recommendF1} className={styles.rightButtonx}>重新推荐</div> : null}
                        {this.state.successA === 'error' ? <div className={styles.rightFFF}>&#12288;&#12288;&#12288;</div> : null}
                        <div style={{ width: 150 }}></div>

                      </div>
                    </Card>
                  </div>
                  <div style={{ height: 26 }}></div>
                  <div style={{ boxShadow: '#e2e5e7 0px 3px 4px' }}>
                    <Row className={styles.colorBackground}>
                      <Col style={{ padding: 10, }} xs={24}>
                        <div className={styles.title1}>
                          <div className={styles.rounds}></div>
                          <span style={{ color: '#4b5475', fontSize: 16, fontWeight: 600 }}>问题聚类</span>
                        </div>
                      </Col>
                    </Row>
                    <Card
                      bordered={false}
                    >



                      <div className={styles.rightBj}>
                        {
                          this.state.successB === 'none' ? <div style={{ width: 390 }}><div style={{ width: 390 }} className={styles.tjwcb}><img src={topc} alt="" /><div style={{ marginLeft: 20 }}>将问题库中语义相近的问题聚类为不同的问题组</div></div></div> : null
                        }
                        {
                          this.state.successB === 'success' ? <div style={{ paddingLeft: 40 }} className={styles.tjwca}>
                            <p style={{ color: '#999999' }}>{this.state.rightBlist.startTime}</p>
                            <p style={{ color: '#333333', fontWeight: 600 }}>{`将 ${this.state.rightBlist.itemCount} 个问题聚类为 ${this.state.rightBlist.groupCount} 个问题组`}</p>
                            <p style={{ color: '#999999', marginBottom: 0 }}>待处理</p>
                            <div className={styles.tjwcb}>
                              <div style={{ marginRight: 30 }}><span style={{ color: '#ff7d27', fontSize: 36 }}>{this.state.rightBlist.qaCount}</span> <span style={{ color: '#333333', fontWeight: 600 }}>个问题组</span></div>
                              <div style={{ marginRight: 30, marginTop: 15 }}>|</div>
                              <div><span style={{ color: '#ff7d27', fontSize: 36 }}>{this.state.rightBlist.questionCount}</span> <span style={{ color: '#333333', fontWeight: 600 }}>个聚类问题</span></div>
                            </div>
                          </div> : null
                        }
                        {this.state.successB === 'success' ? <div style={{ flexBasis: '25%' }}></div> : null}
                        {this.state.successB === 'none' ? <div style={{ flexBasis: '25%' }}></div> : null}
                        {this.state.successB === 'wait' ? <div  className={styles.center}><Progress type="circle" percent={this.state.percentB} width={80} /><span style={{ marginLeft: 20 }}>聚类中</span><span className={styles.loading}></span></div> : null}

                        {this.state.successB === 'none' ? <div onClick={this.recommendF2} className={styles.rightButtona}>开始聚类</div> : null}
                        {this.state.successB === 'none' ? <div className={styles.rightFFF}>&#12288;&#12288;&#12288;</div> : null}
                        {this.state.successB === 'success' ? <div onClick={this.recommendF2} className={styles.rightButtonx}>重新聚类</div> : null}
                        {this.state.successB === 'success' ? <div onClick={this.recommendFb} className={styles.rightButtona} style={{ marginLeft: 20 }}>去处理</div> : null}

                        {/* error */}
                        {
                          this.state.successB === 'error' ? <div style={{ width: 390 }}><div style={{ width: 420 }} className={styles.tjwcb}><img style={{ width: 50, height: 50 }} src={iconc} alt="" /><div style={{ marginLeft: 20 }}>
                            <div style={{ height: 12 }}></div>
                            <p>抱歉，没有找到合适的聚类问题</p>
                            <p>您可以在"问题库"中多导入一些相关问题后再进行聚类</p>
                          </div></div></div> : null
                        }
                        {this.state.successB === 'error' ? <div style={{ flexBasis: '25%' }}></div> : null}
                        {this.state.successB === 'error' ? <div onClick={this.recommendF2} className={styles.rightButtonx}>重新聚类</div> : null}
                        <div style={{ width: 150 }}></div>
                      </div>
                    </Card>
                  </div>
                {/* </Col>
              </Row> */}
              </Content>
              </Layout>
              <Modal
                className='modelZdy'
                title="导入未知问题"
                okText="开始上传"
                cancelText="取消"
                visible={this.state.visible1}
                onOk={this.handleOkA}
                onCancel={this.handleCancelA}
              >
                <Row>
                  <Col span={24}>
                    <p>导入以下时间段内产生的未知问题</p>
                    <div style={{ padding: '0px 60px' }}>
                      {getFieldDecorator('coretime1', {
                        initialValue: this.state.cstime,
                      })(
                        <RangePicker
                          // onChange={this.timePicker}
                          format="YYYY-MM-DD"
                        />
                      )}
                    </div>
                    <p style={{ color: '#b3b3b3', marginTop: 20 }}>上次导入 : {this.state.createTime1} 期间的{this.state.count1}条未知问题</p>
                  </Col>
                </Row>
              </Modal>

              <Modal
               className='modelZdy'
                title="导入未解决问题"
                okText="开始上传"
                cancelText="取消"
                visible={this.state.visible2}
                onOk={this.handleOkB}
                onCancel={this.handleCancelB}
              >
                <Row>
                  <Col span={24}>
                    <p>导入以下时间段内产生的未解决问题</p>
                    <div style={{ padding: '0px 60px' }}>
                      {getFieldDecorator('coretime2', {
                        initialValue: this.state.cstime,
                      })(
                        <RangePicker
                          // onChange={this.timePicker}
                          format="YYYY-MM-DD"
                        />
                      )}
                    </div>
                    <p style={{ color: '#b3b3b3', marginTop: 20 }}>上次导入 : {this.state.createTime2} 期间的{this.state.count2}条未解决问题</p>
                  </Col>
                </Row>
              </Modal>

              <Modal
               className='modelZdy'
                title="导入转人工问题"
                okText="开始上传"
                cancelText="取消"
                visible={this.state.visible3}
                onOk={this.handleOkC}
                onCancel={this.handleCancelC}
              >
                <Row>
                  <Col span={24}>
                    <p>导入以下时间段内产生的转人工问题</p>
                    <div style={{ padding: '0px 60px' }}>
                      {getFieldDecorator('coretime3', {
                        initialValue: this.state.cstime,
                      })(
                        <RangePicker
                          // onChange={this.timePicker}
                          format="YYYY-MM-DD"
                        />
                      )}
                    </div>
                    <p style={{ color: '#b3b3b3', marginTop: 20 }}>上次导入 : {this.state.createTime3} 期间的{this.state.count3}转人工问题</p>
                  </Col>
                </Row>
              </Modal>

              <Modal
                className='modelZdy'
                title="导入自定义问题"
                okText="开始上传"
                cancelText="取消"
                visible={this.state.visible4}
                onCancel={this.handleCancelD}
                footer={[
                  <Button key="back" onClick={this.handleCancel}>
                    取消
                  </Button>,
                  <Button key="submit" type="primary" loading={uploading} disabled={fileList.length === 0} onClick={this.businessWayA}>
                    {uploading ? '导入中' : '开始导入'}
                  </Button>,
                ]}
              // onOk={this.handleOkD}
              // onCancel={this.handleCancelD}

              >
                <Row>
                  <Col span={24}>
                    {/* <div style={{ height: 10 }}></div> */}
                    <div style={{ float: 'left', marginRight: 10 }}>选择要导入的问题文件</div>
                    <div onClick={this.dictTemp} style={{ color: '#26cbff', cursor: 'pointer', float: 'right' }}>下载导入模版</div>
                    <div >
                      <Upload {...props} fileList={this.state.fileList} >
                        <Button className={styles.float}>
                          <Icon type="upload" /> 选择文件
                    </Button>
                      </Upload>
                    </div>
                    <div style={{ height: 20 }}></div>
                  </Col>
                </Row>
              </Modal>

              <Modal
                className='modelZdy'
                title="选择待推荐问题"
                okText="确认"
                cancelText="取消"
                visible={this.state.rightCol1}
                onOk={this.rightCol1}
                onCancel={this.rightColNo1}
              >
                <Row>
                  <Col span={24}>
                    <p>将问题库中满足以下条件的问题进行问题推荐:</p>
                    <Form layout="horizontal" >
                      <FormItem label='包含关键词' {...FormItemLayont}>
                        {getFieldDecorator('bkKeyword', {
                          initialValue: '',
                        })(
                          <Input placeholder="多个关键字之间用空格分开"></Input>
                        )}
                      </FormItem>
                      <FormItem label='不含关键词' {...FormItemLayont}>
                        {getFieldDecorator('NoKeyword', {
                          initialValue: '',
                        })(
                          <Input placeholder="多个关键字之间用空格分开"></Input>
                        )}
                      </FormItem>
                      <FormItem label='字数' {...FormItemLayont}>
                        {getFieldDecorator('InputNumber1', {
                          initialValue: '',
                        })(
                          <InputNumber min={0} max={100} placeholder="最小值" style={{ width: 90 }} />
                        )}
                        <span>  —  </span>
                        {getFieldDecorator('InputNumber2', {
                          initialValue: '',
                        })(
                          <InputNumber min={0} max={100} placeholder="最大值" style={{ width: 90 }} />
                        )}
                      </FormItem>
                      <FormItem label='询问次数' {...FormItemLayont}>
                        {getFieldDecorator('xwcs1', {
                          initialValue: '',
                        })(
                          <InputNumber min={0} max={100} placeholder="最小值" style={{ width: 90 }} />
                        )}
                        <span>  —  </span>
                        {getFieldDecorator('xwcs2', {
                          initialValue: '',
                        })(
                          <InputNumber min={0} max={100} placeholder="最大值" style={{ width: 90 }} />
                        )}
                      </FormItem>
                      <p style={{ color: '#d3d3d3', marginLeft: 30 }}>若不设置任何条件则将对问题库中所有问题进行推荐</p>
                    </Form>
                  </Col>
                </Row>
              </Modal>

              <Modal
                className='modelZdy'
                title="选择待聚类问题"
                okText="确认"
                cancelText="取消"
                visible={this.state.rightCol2}
                onOk={this.rightCol2}
                onCancel={this.rightColNo2}
              >
                <Row>
                  <Col span={24}>
                    <p>将问题库中满足以下条件的问题进行问题推荐:</p>
                    <Form layout="horizontal" >
                      <FormItem label='包含关键词' {...FormItemLayont}>
                        {getFieldDecorator('bkKeyword1', {
                          initialValue: '',
                        })(
                          <Input placeholder="多个关键字之间用空格分开"></Input>
                        )}
                      </FormItem>
                      <FormItem label='不含关键词' {...FormItemLayont}>
                        {getFieldDecorator('NoKeyword1', {
                          initialValue: '',
                        })(
                          <Input placeholder="多个关键字之间用空格分开"></Input>
                        )}
                      </FormItem>
                      <FormItem label='字数' {...FormItemLayont}>
                        {getFieldDecorator('InputNumber3', {
                          initialValue: '',
                        })(
                          <InputNumber min={0} max={100} placeholder="最小值" style={{ width: 90 }} />
                        )}
                        <span>  —  </span>
                        {getFieldDecorator('InputNumber4', {
                          initialValue: '',
                        })(
                          <InputNumber min={0} max={100} placeholder="最大值" style={{ width: 90 }} />
                        )}
                      </FormItem>
                      <FormItem label='询问次数' {...FormItemLayont}>
                        {getFieldDecorator('xwcs3', {
                          initialValue: '',
                        })(
                          <InputNumber min={0} max={100} placeholder="最小值" style={{ width: 90 }} />
                        )}
                        <span>  —  </span>
                        {getFieldDecorator('xwcs4', {
                          initialValue: '',
                        })(
                          <InputNumber min={0} max={100} placeholder="最大值" style={{ width: 90 }} />
                        )}
                      </FormItem>
                      <p style={{ color: '#d3d3d3', marginLeft: 30 }}>若不设置任何条件则将对问题库中所有问题进行推荐</p>
                    </Form>
                  </Col>
                </Row>
              </Modal>

            </div>
          </Spin>
        </PageHeaderWrapper>
      </Suspense>
    );
  }
}

export default connect(({ user }) => ({ // 全局数据
  currentUser: user.currentUser,
}))(Form.create()(KnowledgeSmartMaintenance));
